<template>
    <span :class="tagClasses">{{ text }}
        <i v-if="checkable" class="el-tag__close el-icon-check" @click="onCheck" />
    </span>
</template>


<script>
export default {
    name: 'StudentTag',

//父组件传过来的属性值 <student-tag type="danger" size="min">
    props: {

        key:{
            type:String,
        },
        type: {
            type:String,
            default: 'info'
        },
        size: {
            type:String,
            default: 'small'
        },
        text: {
            type:String,
            default: ''
        },

        checkable: {
            type:Boolean,
            default:false
        }
    },
//组件自己创建的时候初始化的属性
    data() {
        return {
            key:''
        }
    },

    computed:{
        tagClasses(){
            return [
                'el-tag',
                this.size?'el-tag--' + this.size : '',
                this.type?'el-tag--' + this.type : ''
            ]
        }
    },

    watch: {

    },

    created() {

    },

    mounted() {
        
    },


    methods: {
        onCheck(){
            //发送一个事件，(给父组件发送一个消息)
            //事件名称，事件的附带的数据
            this.$confirm('确认选中该学生？其它学生的报名将被自动删除。', '确认信息', {
                distinguishCancelAndClose: true,
                confirmButtonText: '确定',
                cancelButtonText: '取消'
            }).then(() => {
              this.$emit('check',true,true)
              this.$message({
                type: 'success',
                message: '已确定!'
              });
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消'
              });
            });
            }  
    }
}
</script>

<style lang="scss" scoped>

</style>